<!--
 * @Author: 胡俊/treence
 * @Date: 2022-05-24 09:45:03
 * @LastEditors: 黄宇/Hyuishine
 * @LastEditTime: 2024-05-14 16:07:28
 * @Description: 
 * @Email: treence@gmail.com
 * @Company: 3xData
 * @youWant: 我的=》设备信息=》详情页面=》表单
-->
  <template >
  <view class="container_page">

    <!-- 顶部自定义导航栏 -->
    <action-bar :options="navOptions" />
    <view class="main">
      <view class="card">
        <view class="title">基本信息</view>

        <view class="formItem">
          <view class="label">设备名称</view>
          <input class="content"
                 v-model="name"
                 disabled />
        </view>

        <view class="formItem">
          <view class="label">规格信息</view>
          <input class="content"
                 v-model="formObject.specificationInfo"
                 placeholder="请输入规格信息" />
        </view>

        <view class="formItem">
          <view class="label">有效期</view>
          <picker mode="date"
                  class="content"
                  :value="date"
                  @change="startChange($event,'start')">
            <input type="text"
                   disabled
                   :value="formObject.start"
                   :placeholder="'请选择有效期'" />
          </picker>
        </view>

        <view class="formItem">
          <view class="label">保修期</view>
          <picker mode="date"
                  class="content"
                  :value="date"
                  @change="startChange($event,'stop')">
            <input type="text"
                   disabled
                   :value="formObject.stop"
                   :placeholder="'请选择保修期'" />
          </picker>
        </view>

        <view class="formItem"
              style="align-items: flex-start;
              display: flex;
              flex-direction: column;">
          <view class="label">备注</view>
          <textarea style="
              margin-top: 10rpx;
              border: 1rpx solid #e1e1e1;
              width: 100%"
                    v-model="formObject.remake" />
        </view>

      </view>

      <view class="card">
        <view class="title">设备照片
        </view>
        <upload-img :imgList="formObject.deviceImg"
                    :imgcount="5"
                    @changeImage="uploadSuccess($event,'deviceImg')"></upload-img>
      </view>

      <view class="allBtn">
        <view class="btn"
              @click="save">
          <view>保存</view>
        </view>
        <view class="btn1"
              v-if="deviceId"
              @click="delImg">
          <view>删除</view>
        </view>
      </view>
    </view>

    <toast></toast>
  </view>
</template>
<script>
import UploadImg from '@/components/upload/upload-img.vue';
export default {
  components: { UploadImg },
  data () {
    return {
      imageValue: [],
      navOptions: {
        // 导航栏配置参数
        statusBar: "dark",
        left: {
          icon: "back",
        },
        center: {
          title: "",
        },
      },
      deviceClassification: '',// 设备种类id
      name: '',// 设备名称
      deviceId: '',// 表单id
      formObject: {
        deviceImg: null, // 图片
        start: null, // 有效期
        stop: null, // 保修期
        specificationInfo: null, // 规格信息
        remake: null, // 备注
      },
      form: {
        deviceImg: '', // 图片
        specificationInfo: '', // 规格信息
      },
      loading: false,
    }
  },
  onLoad (options) {
    // 获取表单id
    if (options.deviceId) {
      this.deviceId = options.deviceId
      this.getForm()
    }
    this.name = options.name
    this.navOptions.center.title = options.title
    this.deviceClassification = options.deviceClassification
  },
  methods: {
    // 获取表单信息
    getForm () {
      if (this.loading) return

      this.loading = true
      uni.showLoading({
        title: '正在加载请稍后',
        mask: true
      });

      this.$store.dispatch('getDeviceInfo', this.deviceId)
        .then(res => {
          if (res && res.code === 200) {
            this.formObject = res.data
            if (this.formObject.deviceImg) {
              this.formObject.deviceImg = this.formObject.deviceImg.split(',')
            }
          }
        })
        .finally(() => {
          let timer = setTimeout(() => {
            this.loading = false
            uni.hideLoading();
            clearTimeout(timer)
          }, 3000);
        })
    },
    // 保存
    save () {
      if (this.loading) return

      this.loading = true
      uni.showLoading({
        title: '正在加载请稍后',
        mask: true
      });

      // 校验
      let checkName = ['规格信息', '有效期', '保修期', '设备照片']
      let checkContent = ['specificationInfo', 'start', 'stop', 'deviceImg']
      for (let j = 0; j < checkName.length; j++) {
        let that = this
        if (that.formObject[checkContent[j]] == null) {
          uni.showToast({
            title: `请将${checkName[j]}补充完整`,
            icon: 'none',
            duration: 1200
          })
          return
        }
      }

      // 将文件路径转化成字符串格式
      if (this.formObject.deviceImg instanceof Array) {
        this.formObject.deviceImg = this.formObject.deviceImg.join(',')
      }
      // 设备id
      this.formObject.deviceClassification = this.deviceClassification
      // 设备名称
      this.formObject.deviceType = this.name
      // 修改
      if (this.deviceId) {
        this.$store.dispatch('updateDeviceInfo', this.formObject)
          .then(res => {
            if (res && res.code === 200) {
              this.$showToast({
                show: true,
                text: '修改成功!'
              })
              setTimeout(() => {
                uni.navigateBack({
                  delta: 1
                })
              }, 1000)
            } else {
              this.$showToast({
                show: true,
                text: res.msg
              })
            }
          })
          .finally(() => {
            let timer = setTimeout(() => {
              this.loading = false
              uni.hideLoading();
              clearTimeout(timer)
            }, 3000);
          })
      } else { // 新增
        this.$store.dispatch('addDeviceInfo', this.formObject)
          .then(res => {
            if (res && res.code === 200) {
              this.$showToast({
                show: true,
                text: '新增成功!'
              })
              setTimeout(() => {
                uni.navigateBack({
                  delta: 1
                })
              }, 1000)
            } else {
              this.$showToast({
                show: true,
                text: res.msg
              })
            }
          })
          .finally(() => {
            let timer = setTimeout(() => {
              this.loading = false
              uni.hideLoading();
              clearTimeout(timer)
            }, 3000);
          })
      }
    },
    // 删除
    delImg () {
      uni.showModal({
        title: '提示',
        content: '确定要删除该设备信息？',
        cancelText: '取消',
        confirmText: '确认',
        success: res => {
          if (res.confirm) {
            this.loading = true
            uni.showLoading({
              title: '正在删除请稍后',
              mask: true
            });
            this.$store.dispatch('delDeviceInfo', this.deviceId)
              .then(res => {
                if (res && res.code === 200) {
                  this.$showToast({
                    show: true,
                    text: '删除成功!'
                  })
                  setTimeout(() => {
                    uni.navigateBack({
                      delta: 1
                    })
                  }, 1000)
                } else {
                  this.$showToast({
                    show: true,
                    text: res.msg
                  })
                }
              })
              .finally(() => {
                let timer = setTimeout(() => {
                  this.loading = false
                  uni.hideLoading();
                  clearTimeout(timer)
                }, 3000);
              })
          }
        }
      });
    },
    // 上传成功回调函数
    uploadSuccess (e, label) {
      this.formObject[label] = e.join(',')
    },
    //! 提供给父组件的校验方法，错误时返回表单名
    validateForm () {
      let result = true
      for (const item in this.formObject) {
        for (const key in this.form) {
          if (item == key && !this.formObject[item]) {
            result = false
            break
          }
        }
        if (result == false) {
          break
        }
      }
      return result
    },
    startChange (e, key) {
      this.$set(this.formObject, key, e.detail.value)
    }
  }
}
</script>
<style lang="less">
.container_page {
  background: #f4f5f5;
  height: 100vh;
  font-size: 28rpx;
}
.main {
  height: 100vh;
  overflow: auto;
  padding-bottom: 300rpx;
  .card {
    background: white;
    margin-bottom: 16rpx;
    padding: 40rpx 24rpx;
    border-radius: 20rpx;

    & > view:not(:last-child) {
      margin-bottom: 20rpx;
    }
  }
}
.title {
  color: #333;
  font-size: 30rpx;
  font-weight: bold;
  line-height: 36rpx;
  .titleTip {
    display: inline;
    font-weight: 300;
    font-size: 20rpx;
    color: red;
  }
}
.formItem {
  display: flex;
  align-items: center;

  .label {
    color: #333;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 36rpx;
    width: 35%;
  }

  .content {
    flex: 1;
    text-align: right;
  }
}

.allBtn {
  bottom: 50rpx;
  .btn {
    width: 100%;
    bottom: 25rpx;
    left: 0;
    & > view {
      height: 80rpx;
      border-radius: 10rpx;
      background: #5390ff;
      margin: 0 24rpx;
      text-align: center;
      line-height: 80rpx;
      font-size: 32rpx;
      color: #ffffff;
    }
  }
  .btn1 {
    margin-top: 25rpx;
    width: 100%;
    left: 0;
    & > view {
      height: 80rpx;
      border-radius: 10rpx;
      background: #ff4539;
      margin: 0 24rpx;
      text-align: center;
      line-height: 80rpx;
      font-size: 32rpx;
      color: #ffffff;
    }
  }
}
</style>